<template>
    <div class="shouye">
        <!-- <router-view></router-view> -->
        <div class="main-box">
            <mains></mains>
        </div>
        <div class="shouye-box">
            <!-- 首页轮播图 -->
            <div class="banner">
                <Banner></Banner>
            </div>
            <!-- 轮播图上图标 -->

            <div class="nearby" @click="GOeat">
                <div class="icon">
                    <van-icon name="location-o" class="location-o" />
                </div>
                <div class="shop">|&nbsp;附近门店&nbsp;&nbsp;></div>
            </div>
            <div class="right-icon">
                <div class="righticon">
                    <van-icon name="scan" class="erweima" />
                </div>
                <div class="righticon">
                    <van-icon name="envelop-o" class="msg" />
                </div>
            </div>
            <!-- 注册/登录 -->
            <div class="login">
                <!-- 雪王头像 -->
                <div class="via">
                    <img src="../assets/images/login-logo.png" alt="" />
                </div>
                <!-- 文本 -->
                <div class="text">
                    <p class="hi" v-if="loginStatus=='false'">尊敬的会员</p>
                    <p class="hi" v-else>{{userName}}</p>
                    <p class="tips" v-if="loginStatus=='false'">登录后可享&nbsp;&nbsp;[闲时优惠]&nbsp;&nbsp;等多项权益</p>
                    <p class="tips" v-else = "loginStatus = 'true'">再升一级可享[闲时优惠]等8项权益</p>
                </div>
                <!-- 注册/登录 -->
                <div class="rightLogin" @click="GOLogin">
                    <p v-if="loginStatus=='false'" >注册/登录</p>
                </div>
            </div>
            <!-- 自提外卖 -->
            <div class="enter">
                <!-- 自提 -->
                <div class="take-their" @click="goMenu">
                    <div class="txt">
                        <p>自提</p>
                        <p>下单免排队</p>
                    </div>
                    <div class="img-box">
                        <img class="img-auto" src="../assets/images/waimai3.webp" />
                    </div>
                </div>
                <!-- 外卖 -->
                <div class="take-out" @click="goMenu">
                    <div class="txt">
                        <p>外卖</p>
                        <p>甜蜜送到家</p>
                    </div>
                    <div class="img-box">
                        <img class="img-auto" src="../assets/images/ziti2.webp" />
                    </div>
                </div>
            </div>
            <!-- 魔法铺/邀请有奖 -->
            <div class="magic-Invite">
                <div class="magic">
                    <p>雪王魔法铺</p>
                    <p>雪王币&nbsp;兑换好礼</p>
                    <img src="../assets/images/mofapu.webp" />
                </div>
                <div class="Invite">
                    <p>邀请有奖</p>
                    <p>毎邀一人&nbsp;得15元</p>
                    <img src="../assets/images/hongbao.webp" />
                </div>
            </div>
            <div class="News">
                <div class="new">
                    <div class="title">甜蜜资讯</div>
                    <div class="more" @click="clickMore">更多</div>
                </div>
                <div class="content">
                    <div class="content-box" v-for="(item, index) in newsdata" :key="index">
                        <div class="img">
                            <img class="img-auto" :src="item.msgImg" />
                        </div>
                        <div class="notice">
                            <div class="handpick">精选</div>
                            <p>{{ item.msgTitle }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import mains from "./Main.vue";
import Banner from "../views/Banner.vue";
import { getNewData } from "../api/NewData.js";
export default {
    name: "Shouye",
    components: {
        Banner,
        mains,
    },
    data() {
        return {
            newsdata: [],
            loginStatus:'',
            // 用户名
            userName:''
        };
    },
    created() {
        getNewData().then((data) => {
            this.newsdata = data.newsdata;
            // console.log(this.newsdata);
        });
        // 获取登录标识符
        if(this.loginStatus = localStorage.getItem("isLogin")!==undefined){

            this.loginStatus = localStorage.getItem("isLogin")
            this.userName = JSON.parse(localStorage.getItem('userInfo')).name
        }
    },
    
    methods: {
        goMenu(){
            if(this.loginStatus=='false'){

                this.$router.push({
                    name:"Login"
                })
            }else{
                this.$router.push({
                    name:"Menu"
                })
            }
        },
        clickMore() {
            this.$router.push({
                name: "More",
            });
            // this.$toast.loading({
            //     mask:true,
            //     forbidClick:true,
            //     message:'加载中.....'
            // })
        },
        GOLogin(){
           
                // 去登录
                this.$router.push({
                    name:"Login"
                })
            
        },
        GOeat(){
            this.$router.push({
                name:"Eat"
            })
        }
    },
};
</script>

<style lang="less" scoped>
.shouye {
    width: 375px;
    // margin-bottom: 50px;
    .main-box{
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .shouye-box{
        height: calc(100% - 50px);
    .banner {
        display: flex;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    .News {
        width: 350px;
        height: auto;
        margin: -55px auto;
        .content {
            width: 350px;
            //  background-color: red;
            margin-top: 10px;
            border-top-left-radius: 10px;
            padding-bottom: 50px;
            .content-box {
                .img {
                    width: 350px;
                    height: 160px;
                    background-color: green;
                    border-top-right-radius: 15px;
                    border-top-left-radius: 15px;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .notice {
                    width: 350px;
                    height: 50px;
                    background-color: #fff;
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;
                    p{
                        font-size: 17px;
                        font-weight: 500;
                    }
                    .handpick{
                        margin: 0 15px 0 15px;
                        color: #e4393c;
                    }

                }
            }
        }
        .new {
            display: flex;
            align-items: baseline;
            background-color: #fff;

            .title {
                font-weight: 700;
                font-size: 16px;
                margin-left: 10px;
            }
            .more {
                color: #e4393c;
                margin: 10px 0 0 240px;
                font-weight: 550;
            }
        }
    }
    .magic-Invite {
        width: 350px;
        height: 60px;
        // background-color: pink;
        margin: 90px auto;
        .magic,
        .Invite {
            width: 48%;
            height: 100%;
            display: inline-block;
            border-radius: 10px;
            background-color: #fef6f6;
            font-size: 14px;
            position: relative;

            .Invite {
                img {
                    width: 45px;
                    height: 45px;
                    position: absolute;
                    top: 11px;
                    right: -13px;
                }
            }
            img {
                width: 50px;
                height: 50px;
                position: absolute;
                top: 6px;
                right: 2px;
            }
            p:nth-child(1) {
                margin: 10px 0 5px 10px;
            }
            p:nth-child(2) {
                margin: 0 0 0 10px;
                color: #c4baba;
            }
        }
        .magic {
            margin-right: 10px;
        }
    }
    .enter {
        width: 350px;
        height: 180px;
        // background-color: pink;
        margin: -70px auto;
        display: flex;
        .take-their,
        .take-out {
            width: 48%;
            height: 100%;
            // background-color: red;
            border-radius: 15px;
            display: inline-block;
            display: flex;
            flex-direction: column;
            // background-color: #f4eaeb;
            background-color: #fbf4f5;
            margin-right: 10px;
            border: 1px solid #686969;

            .txt {
                width: 100%;
                height: 40%;
                p:nth-child(1) {
                    font-weight: bold;
                    font-size: 20px;
                    margin: 15px 0 0 10px;
                }
                p:nth-child(2) {
                    margin: 3px 0 0 10px;
                    font-weight: 550;
                    font-size: 15px;
                }
            }
            .img-box {
                width: 180px;
                height: 60%;
                img {
                    height: 106px;
                    width: 165px;
                    margin-left: 1px;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                }
            }
        }
    }
    .login {
        width: 350px;
        height: 70px;
        background-color: #fff;
        position: relative;
        top: -85px;
        left: 12px;
        border-radius: 10px;
        box-shadow: 0 3px 1px #e2ebeb;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .via {
            width: 40px;
            height: 40px;
            background-color: #c4baba;
            border-radius: 50%;

            img {
                width: 33px;
                height: 33px;
                margin: 3px;
            }
        }
        .text {
            width: 200px;
            height: 40px;
            // background-color: red;
            display: inline-block;
            .hi {
                font-size: 16px;
                font-weight: 700;
                margin-bottom: 2px;
            }
            .tips {
                font-size: 12px;
                color: #bcbcbc;
            }
        }
        .rightLogin {
            width: 65px;
            height: 40px;
            display: inline-block;
            color: #e4393c;
            font-weight: bold;
            font-size: 15px;
            text-align: center;
            line-height: 40px;
        }
    }

    .nearby {
        display: flex;
        width: 110px;
        height: 25px;
        border-radius: 10px;
        background-color: pink;
        position: relative;
        top: -245px;
        left: 11px;
        flex-direction: row;
        justify-content: end;
        align-items: center;
        color: #fff;
        font-size: 13px;
        background-color: rgba(0, 0, 0, 0.2);

        .icon {
            .location-o {
                font-size: 19px;
                margin: 1px 0 0px 7px;
            }
        }
        .shop {
            width: 80px;
            text-align: center;
            // border-left: 1px solid #fff;
        }
    }

    .right-icon {
        width: 80px;
        height: 0.66667rem;
        // background-color: pink;
        position: relative;
        top: -270px;
        left: 293px;
        display: flex;
        justify-content: space-around;
        .righticon {
            width: 25px;
            height: 25px;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 50%;

            .erweima {
                font-size: 20px;
                text-align: center;
                line-height: 27px;
                margin: 0 0 0 2px;
                color: #fff;
            }
            .msg {
                font-size: 20px;
                text-align: center;
                line-height: 27px;
                margin: 0 0 0 2px;
                color: #fff;
            }
        }
    }
}
}
</style>
